<template>
<div>
  <div class="opt-area-02">
    <div class="left-con">
      <div class="input-frame" style="width: 164px">
        <Select placeholder="请选择区" :disabled="Adisabled" v-model="params.area_id" style="width:164px" clearable @on-change="findDistrictList(3,params.area_id)" @on-clear="clearMsg(3)">
          <Option v-for="item in List1" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div class="input-frame" style="width: 164px">
        <Select placeholder="请选择街道" :disabled="Bdisabled" v-model="params.street_id" style="width:164px" clearable @on-change="findDistrictList(4,params.street_id)" @on-clear="clearMsg(4)">
          <Option v-for="item in List2" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
      <div class="input-frame" style="width: 164px">
        <Select placeholder="请选择社区" :disabled="Cdisabled"  v-model="params.community_id" style="width:164px" clearable>
          <Option v-for="item in List3" :value="item.id" :key="item.id">{{ item.name }}</Option>
        </Select>
      </div>
    </div>
  </div>
</div>
</template>

<script>
import { findSubordinateList } from '../../api/eventlist'

export default {
  name: 'community-select',
  data () {
    return {
      severUserInfo: {},
      List1: [],
      List2: [],
      List3: [],
      Adisabled: false,
      Bdisabled: false,
      Cdisabled: false,
      params: {
        area_id: '',
        street_id: '',
        community_id: ''
      }
    }
  },
  methods: {
    init (e) {
      this.params.area_id = ''
      this.params.street_id = ''
      this.params.community_id = ''
      let _this = this
      setTimeout(function () {
        _this.findLevelList(e)
      }, 1000)
    },
    findLevelList (e) {
      this.severUserInfo = e
      if (this.severUserInfo.company_grade === '2') {
        this.findDistrictList(2, '999999999')
      } else if (this.severUserInfo.company_grade === '3') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.company_id
        this.findDistrictList(3, this.params.area_id)
        this.Adisabled = true
      } else if (this.severUserInfo.company_grade === '4') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.parent_id
        this.findDistrictList(3, this.params.area_id)
        this.params.street_id = this.severUserInfo.company_id
        this.findDistrictList(4, this.params.street_id)
        this.Adisabled = true
        this.Bdisabled = true
      } else if (this.severUserInfo.company_grade === '5') {
        this.findDistrictList(2, '999999999')
        this.params.area_id = this.severUserInfo.parent_ids.split(',')[3]
        this.findDistrictList(3, this.params.area_id)
        this.params.street_id = this.severUserInfo.parent_id
        this.findDistrictList(4, this.params.street_id)
        this.params.community_id = this.severUserInfo.company_id
        this.Adisabled = true
        this.Bdisabled = true
        this.Cdisabled = true
      }
    },
    clearMsg (e1) {
      if (e1 === 3) {
        this.params.area_id = ''
        this.params.street_id = ''
        this.params.community_id = ''
      } else if (e1 === 4) {
        this.params.street_id = ''
        this.params.community_id = ''
      }
    },
    findDistrictList (e1, e2) {
      let data = {
        grade: e1,
        id: e2
      }
      findSubordinateList(data).then(ret => {
        if (ret.data.errcode === 0) {
          if (e1 === 2) {
            this.List1 = ret.data.data
          } else if (e1 === 3) {
            this.List2 = ret.data.data
          } else if (e1 === 4) {
            this.List3 = ret.data.data
          }
        } else {
          this.$Notice.error({
            title: '查询失败',
            desc: ret.data.errmsg
          })
        }
      })
    },
    callBack () {
      this.$emit('callBack', this.params)
    }
  },
  watch: {
    'params.area_id': function (newV, oldV) {
      console.log(111)
      if (newV !== oldV) {
        try {
          // this.callBack({ type: 'area', area_id: newV })
          this.callBack()
        } catch (e) {
          // console.log('infoWindowObject.id', e)
        }
      }
    },
    'params.street_id': function (newV, oldV) {
      console.log(222)
      if (newV !== oldV) {
        try {
          // this.callBack({ type: 'street', street_id: newV })
          this.callBack()
        } catch (e) {
          // console.log('infoWindowObject.id', e)
        }
      }
    },
    'params.community_id': function (newV, oldV) {
      if (newV !== oldV) {
        try {
          // this.callBack({ type: 'community', community_id: newV })
          this.callBack()
        } catch (e) {
          // console.log('infoWindowObject.id', e)
        }
      }
    }
  }
}
</script>

<style scoped>
.opt-area-02 {
  display: flex;
  align-items: center;
  flex-direction: column;
  /*border: 1px solid #abdcff;*/
  /*background-color: #f0faff;*/
  padding: 8px 16px 8px 0px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.opt-area-02 .right-con {
  width: 100%;
  margin-top: 5px;
  display: flex;
}

.opt-area-02 .left-con {
  font-size: 14px;
  width: 100%;
}

.opt-area-02 .left-con span {
  font-weight: bold;
}

.opt-area-02 .right-con input {
  width: 150px;
  margin-right: 10px;
}

.opt-area-02 .right-con .input-frame {
  width: 200px;
  margin-right: 10px;
}
.input-frame {
  width: 120px;
  margin-right: 10px;
  float: left;
}
</style>
